import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';


function userNameValidator(control:FormControl): {[s:string]:boolean}{
  if(!control.value.match(/^zime/)){
    return{invalidUser:true}
  }
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 myForm:FormGroup;//对应登录的表单

 userName:AbstractControl;//输入用户名的输入控件

 password:AbstractControl;//输入密码控件

 constructor(private fb:FormBuilder){
   this.myForm=this.fb.group(
     {
       'userName':['zime', Validators.compose([Validators.required,userNameValidator,Validators.minLength(7)])],
       'password':['',Validators.compose([Validators.required,Validators.minLength(6)])]
     }
   );
   this.userName=this.myForm.controls['userName'];
   this.password=this.myForm.controls['password'];

 }
 
 onSubmit(value:any){
   console.log(value);
 }
}
